<!--
 * @description 梦幻西游工具箱首页
 * @function 提供游戏工具导航功能，包含抓鬼工具、金价查询、答题器等16个功能模块
 * @workflow 用户点击功能模块后跳转到对应的工具页面
 * @author 开发团队
 * @date 2024-01-01
-->

<template>
	<div class='container'>
		<!-- 头部广告占位 -->
		<!-- 		<div class="ad-header">
			<div class="ad-placeholder"></div>
		</div> -->
		<!-- 背景水印 -->
		<div class="watermark">
			<div class="watermark-text">梦幻西游工具箱</div>
			<div class="watermark-subtitle">游戏助手，让游戏更轻松</div>
		</div>

		<!-- 功能导航网格 -->
		<div class="nav-grid">
			<div v-for="tool in tools" :key="tool.id" class="nav-item" @click="handleToolItemClick(tool)" v-if="tool.path">
				<div class="tool-icon">
					<img :src="tool.icon" :alt="tool.name" class="icon-img" />
				</div>
				<div class="tool-name">{{ tool.name }}</div>
			</div>
		</div>

		<!-- 底部广告占位 -->
		<!-- 	<div class="ad-footer">
			<div class="ad-placeholder"></div>
		</div> -->
	</div>
</template>

<script>
// 结构
import {
	defineComponent,
	onMounted,
	ref
} from 'vue';

// 模块化
export default defineComponent({
	name: 'Home', // 组件名称
	props: {
		// 接收父组件数据
	},
	components: {
		// 定义子组件
	},
	// 主要是组件内交互事件
	setup(props, ctx) {
		// 工具功能数据
		const tools = ref([{
			id: 'Gemstone',
			name: '宝石合成',
			icon: '/static/images/gemstone.png',
			path: '/pages/gemstone/Index'
		},
		{
			id: 'qianyuandan',
			name: '乾元丹',
			icon: '/static/images/qianyuandan.png',
			path: '/pages/qianyuandan/Index'
		},
		{
			id: 'quest',
			name: '任务链',
			icon: '/static/logo.png',
			// path: '/pages/taskchain/Index'
		},
		{
			id: 'gold',
			name: '货币查询',
			icon: '/static/logo.png'
		},
		{
			id: 'server',
			name: '最新开服',
			icon: '/static/logo.png'
		},
		{
			id: 'account',
			name: '全服号价',
			icon: '/static/logo.png'
		},
		{
			id: 'ghost',
			name: '抓鬼工具',
			icon: '/static/logo.png'
		},
		{
			id: 'quiz',
			name: '答题器',
			icon: '/static/logo.png'
		},
		{
			id: 'damage',
			name: '固伤计算器',
			icon: '/static/logo.png'
		},
		{
			id: 'skill',
			name: '技能计算',
			icon: '/static/logo.png'
		},
		{
			id: 'exp',
			name: '升级经验',
			icon: '/static/logo.png'
		},
		{
			id: 'equipment',
			name: '装备属性',
			icon: '/static/logo.png'
		}
		]);

		/**
		 * 处理工具项点击事件
		 * @param {string} toolId - 工具ID
		 * @description 用户点击工具项时的响应处理
		 * @usage 在template中绑定点击事件
		 */
		const handleToolItemClick = (tool) => {
			console.log('导航到工具:', tool);
			uni.navigateTo({
				url: tool.path,
				success: () => {
					console.log('导航成功');
				},
				fail: () => {
					console.log('导航失败');
					uni.showToast({
						title: '功能开发中...',
						icon: "none",
						duration: 2000
					});
				}
			});
			// TODO: 添加具体的导航逻辑
			// uni.navigateTo({
			//     url: `/pages/${toolId}/${toolId}`
			// });
		};

		onMounted(() => {
			// 初始化逻辑
		});

		return {
			tools,
			handleToolItemClick
		};
	},
	// 组件之间交互事件
	methods: {

	},
	// 生命周期 - 创建完成（访问DOM元素）
	beforeCreate() {

	},
	// 生命周期 - 创建完成（访问当前this实例）
	created() {

	},
	// 生命周期 - 挂载完成（访问当前this实例）
	mounted() {

	},
	// 生命周期 - 更新之前（访问当前this实例）
	beforeUpdate() {

	},
	// 生命周期 - 更新之前（访问当前this实例）
	updated() {

	},
	// 生命周期 - 销毁之前（访问当前this实例）
	unmounted() {

	},
	// 生命周期 - 组件激活（访问当前this实例）
	activated() {

	},
	// 生命周期 - 组件停用（访问当前this实例）
	deactivated() {

	},
	// 生命周期 - 子孙组件错误时
	errorCaptured() {

	}
});
</script>

<style lang='less' scoped>
/* scoped 使用得定义的样式只在本页面内生效  */
.container {
	width: 100vw;
	min-height: calc(~" 100vh - 160rpx");
	padding: 40rpx 32rpx;
	padding-bottom: 120rpx;
	box-sizing: border-box;

	.watermark {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transform: rotate(-15deg);

		.watermark-text {
			color: rgba(0, 0, 0, 0.03);
			font-size: 120rpx;
			font-weight: 300;
			line-height: 1.2;
			text-align: center;
			user-select: none;
		}

		.watermark-subtitle {
			color: rgba(0, 0, 0, 0.02);
			font-size: 60rpx;
			font-weight: 300;
			line-height: 1.2;
			text-align: center;
			margin-top: 20rpx;
			user-select: none;
		}
	}

	.nav-grid {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 auto;
		justify-content: flex-start;
		align-items: center;
		align-content: flex-start;
		position: relative;
		z-index: 2;

		.nav-item {
			background: white;
			border-radius: 8rpx;
			text-align: center;
			border: 2rpx solid #ddd;
			transition: all 0.2s ease;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			align-items: center;
			width: calc(~ " (100vw - 96rpx)/3"); // 32*2 双边间距  16*2内部间距
			height: calc(~ " (100vw - 96rpx)/3");
			margin-left: 16rpx;
			margin-top: 16rpx;
			box-sizing: border-box;

			&:nth-child(3n+1) {
				margin-left: 0;
			}

			&:hover {
				border-color: #999;
				background: #fafafa;
			}

			&:active {
				background: #f0f0f0;
			}

			.tool-icon {
				width: 120rpx;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				margin-bottom: auto;
				flex-shrink: 0;

				.icon-img {
					width: 120rpx;
					height: 120rpx;
					object-fit: contain;
				}
			}

			.tool-name {
				color: #333;
				font-size: 32rpx;
				line-height: 40rpx;
				font-weight: bold;
				letter-spacing: 4rpx;
				text-align: center;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				word-break: break-all;
				max-width: 100%;
				margin-top: auto;
				margin-bottom: 20rpx;
			}
		}
	}

	.ad-header,
	.ad-footer {
		margin: 20rpx 0;
		position: relative;
		z-index: 2;

		.ad-placeholder {
			background: #e0e0e0;
			border: 4rpx dashed #ccc;
			border-radius: 16rpx;
			padding: 40rpx;
			height: 120rpx;
		}
	}
}
</style>